<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2024-05-09 09:34:17
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2024-05-09 15:02:57
 * @FilePath: \vue-admin-template\src\views\zaixiankaoshi\xianshangkaoshi.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="m">
      <div class="ti">
        <div class="exam-container">
          <h2 class="question" style="margin-left: 34px;">{{ question }}</h2>
          <form @submit.prevent="submitExam">
            <!-- 选项 -->
            <div v-for="(option, index) in options" :key="index" class="option" @click="selectOption(option.value)">
              <input :id="option.value" v-model="selectedAnswer" type="radio" :value="option.value">
              <label :for="option.value">{{ option.label }}</label>
            </div>
            <!-- 按钮 -->
            <div
              style="margin-top: -90px;
       margin-left: 384px;"
            >
              <el-button-group
                style="display: flex; margin-left: -227px;
               margin-top: 110px;"
              >
                <el-button class="custom-button" icon="el-icon-arrow-left" style="margin-right: 10px;margin-top: 14px;" @click="prevQuestion">上一题</el-button>
                <el-popconfirm
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定要交卷吗？"
                >
                  <el-button slot="reference" type="submit" class="custom-button">交卷</el-button>
                </el-popconfirm>
                <el-button class="custom-button" style="margin-left: 11px;margin-top: 14px;">下一题<i class="el-icon-arrow-right el-icon--right" /></el-button>
              </el-button-group>
            </div>
            <!-- <div class="button-container">
        <button type="button" class="prev-button" @click="prevQuestion">上一题</button>
        <button type="button" class="next-button" @click="nextQuestion">下一题</button>
        <button type="submit" class="submit-button">提交</button>
      </div> -->
          </form>

        </div>
      </div>
      <!-- 倒计时 -->
      <div class="time">
        <span>剩余时间：</span>
        <span>{{ hours }}:</span>
        <span>{{ minutes }}:</span>
        <span>{{ seconds }}</span>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      question: '驾驶汽车频繁变更车道的危害以下选项错误的是？',
      options: [
        { label: 'A、扰乱交通秩序', value: 'A' },
        { label: 'B、易导致爆胎', value: 'B' },
        { label: 'C、影响正常通行', value: 'C' },
        { label: 'D、易引发交通事故', value: 'D' }
      ],
      selectedAnswer: '',
      currentQuestionIndex: 0,
      hours: 1,
      minutes: 0,
      seconds: 0
    }
  },

  mounted() {
    this.countDown()
  },
  methods: {
    selectOption(value) {
      this.selectedAnswer = value
    },
    submitExam() {
      if (this.selectedAnswer) {
        // 在这里可以添加提交答案到服务器的逻辑
        console.log('提交的答案是:', this.selectedAnswer)
      } else {
        alert('请选择一个答案')
      }
    },
    prevQuestion() {
      if (this.currentQuestionIndex > 0) {
        this.currentQuestionIndex--
      }
    },
    nextQuestion() {
      if (this.currentQuestionIndex < this.options.length - 1) {
        this.currentQuestionIndex++
      }
    },
    countDown() {
      setInterval(() => {
        if (this.seconds > 0) {
          this.seconds--
        } else {
          if (this.minutes > 0) {
            this.minutes--
            this.seconds = 59
          } else {
            if (this.hours > 0) {
              this.hours--
              this.minutes = 59
              this.seconds = 59
            } else {
              this.submitExam()
            }
          }
        }
      }, 1000)
    }
  }
}
</script>
<style>
.ti{
    width: 600px;
    height: 500px;
    margin: auto;
    background-color: #8ea1b4;
    line-height: 4;
}
.span {
  font-size: 20px;
}
.m{
 width: 100%;
 height: 700px;
 display: flex;
 background-color: #00000017;
}
.time{
    width: 200px;
    height: 200px;
    font-size: 20px;
    /* font-family: Hiragino Sans GB; */
    margin-top: 100px;
    margin-right: 60px;
}
.exam-container {
  font-family: Arial, sans-serif;
}

.option {
  display: flex;
  align-items: center;
  margin-bottom: 0.5em;
  cursor: pointer;
  margin-left: 110px;
}
.custom-button {
  width: 73px;
  height: 34px;
  font-size: 1em;
  padding: 0; /* Removes default padding */
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}

.custom-button:hover {
  background-color: #0056b3;
}
</style>
